<style>
    .weui_cell_ft {
        color: rgb(255,150,18)
    }
    .weui_btn_primary {
        background-color: rgb(43,165,187);
        color: rgb(221,221,221);
    }
    .vux-number-selector {
        color: rgb(43,165,187)
    }
</style>
<template>
    <div style="  background-color: rgb(240,240,240);">
      	<x-header style="background-color: rgb(43,165,187);" :left-options="{backText: '返回', showBack: true }">
      		  <span style=" color: rgb(221,221,221); font-size:14px; ">支付订单</span>
      	</x-header>
      	<div>
        		<group title="">
          			<cell title="牛肉卷" :value.sync="queryParams.price | currency '￥' "></cell>
          			<cell title="数量:">
      		        	<div slot="value">
      		          		<x-number title="" :value.sync="queryParams.count" :min=1 :max=100 @on-change="changeNub"></x-number>
      		        	</div>
    		      	</cell>
    		      	<cell title="小计:">
      		        	<div slot="value">
      		          		<span style=" color: rgb(255,150,18);font-size: 16px;font-weight:bold ">
                            {{ queryParams.price * queryParams.count | currency "￥"}}
                        </span>
      		        	</div>
    		      	</cell>
    		    </group>
    		    <group title="">
          			<cell title="抵用券" value="使用抵用券" is-link></cell>
          			<cell title="订单总价:" :value.sync= " queryParams.price * queryParams.count | currency '￥' " ></cell>
    		    </group>
    		    <group title="">
          			<cell title="您绑定的手机号码" value=""></cell>
          			<cell title="187****4577" value="绑定新号码" is-link></cell>
    		    </group>
    		    <group>
    		        <x-button type="primary" :value.sync="show" @click="click">手机支付</x-button>
    		    </group>
            <actionsheet :show.sync="show" :menus="menus" @on-click-menu="clickMenu" ></actionsheet>
      	</div>
    </div>
</template>
<script>
	  import XHeader from 'vux/dist/components/x-header'
	  import Group from 'vux/dist/components/group'
  	import Cell from 'vux/dist/components/cell'
  	import XNumber from 'vux/dist/components/x-number'
  	import Actionsheet from 'vux/dist/components/actionsheet'
  	import XButton from 'vux/dist/components/x-button'

    export default {
        props: {
            sharestate: Object,
            settings: Object
        },
        components: {
        	  XHeader,
          	Group,
  		   	  Cell,
  		      XNumber,
  		      Actionsheet,
  		      XButton
        },
        ready: function() {
        	 var weixin = `
            <div style="background-color: rgb(240,240,240); height: 36px;line-height: 36px;"><img style="float:left;top: 6px;position: relative;left: 82px; width: 25px; height: 25px" src="./src/img/weixin.png">微信支付</div>
            `;
            this.menus.weixin = weixin;
            var zhifubao = `
            <div style="background-color: rgb(240,240,240); height: 36px;line-height: 36px;"><img style="float:left;top: 6px;position: relative;left: 82px; width: 25px; height: 25px" src="./src/img/zhifubao.png">支付宝支付</div>
            `;
            this.menus.zhifubao = zhifubao;
        },
        data: function() {
          	return {
                queryParams: {
                    id: this.$route.query.id,
                    price: 23.9,
                    count: 1
                },
                show: false,
                menus: {
                    weixin: '',
                    zhifubao: ''
                }
                
          	}
        },
        methods: {
            changeNub: function(val) {
                console.log(val)
            },
            click: function() {
                this.show= true
            },
            clickMenu: function(key) {
                this.$route.router.go({ name: 'PayWec',params: { key: key }})
                if ( key=="weixin" ) {
                  /*this.$http.post( getBrandWCPayRequest, 参数).then( function () {

                  })*/
                }else if(key=="zhifubao") {
                  /*this.$route.post(支付宝接口,参数).then( function () {

                  })*/
              } 
            },
            onWxBridgeReady(event, payData) {
              WeixinJSBridge.invoke('getBrandWCPayRequest', payData, function (res) {
                // alert('res.err_msg: ' + res.err_msg);
                if (res.err_msg == 'get_brand_wcpay_request:ok') {
                  renderSuccessPage();
                  // TODO: redirect to success
                }
                else {
                  renderFailPage();
                  // TODO: redirect to fail
                }
              });
            }
        }
    }
</script>